<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>修改学生信息页面</title>
    <style>
      body {
        background-image: url(./img/v2-eb914abdab236dea6c6d6d65b2914898_r.jpg);
        background-repeat: no-repeat;
        opacity: 0.7;
      }
      .justify-content-end {
        border: 1px solid rgb(197, 197, 197);
      }
      .list-group > li {
        width: 20%;
        text-align: center;
        margin: 10px 0;
        height: 13%;
      }
      h1 {
        text-align: center;
      }
      #aboat {
        text-align: center;
      }
      #aboat > a {
        text-decoration: none;
        color: rgb(83, 83, 83);
      }

      ul > li > .btn-primary {
        background-color: white;
        color: rgb(83, 83, 83);
        border: 0px;
      }
      ul > li:hover {
        background-color: grey !important;
      }
      #x:hover {
        color: rgb(83, 83, 83);
        background-color: grey;
      }
      ul > li > .collapse {
        display: inline;
        border: 0px !important;
      }
      a {
        text-decoration: none !important;
      }
      #content {
        width: 70%;
        position: absolute;
        top: 20%;
        left: 25%;
        border: 2px solid rgb(158, 156, 156);
        height: 72%;
      }
      #content > div {
        margin-left: 30px;
        float: left;
        width: 35%;
      }
      #content > div > div {
        margin-top: 15px;
      }
      #content #down {
        position: absolute;
        top: 70%;
        left: 45%;
      }
      #content #post {
        position: absolute;
        top: 70%;
        left: 60%;
      }
    </style>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <ul class="nav justify-content-end">
      <li class="nav-item">
        <a class="nav-link active" href="#">个人信息</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./personInfo.html">修改信息</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./login.html">退出</a>
      </li>
      <li class="nav-item">
        <img
          src="./img/屏幕截图 2022-03-18 093414.png"
          alt=""
          class="nav-link"
        />
      </li>
    </ul>
    <h1>欢迎登录学生宿舍管理系统</h1>
    <ul class="list-group">
      <li class="list-group-item disabled" aria-disabled="true">信息模块</li>
      <li class="list-group-item">
        <button
          class="btn btn-primary"
          id="x"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          管理信息模块
        </button>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            <a href="">超级管理员</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            <a href="">辅导管理员</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            <a href="">宿舍管理员</a>
          </div>
        </div>
      </li>
      <li class="list-group-item">
        <button
          class="btn btn-primary"
          id="x"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample1"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          班级管理模块
        </button>
        <div class="collapse" id="collapseExample1">
          <div class="card card-body">
            <a href="./classInfo.html">查看班级信息</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample1">
          <div class="card card-body">
            <a href="./classAddInfo.html">添加班级信息</a>
          </div>
        </div>
      </li>
      <li class="list-group-item">
        <button
          class="btn btn-primary"
          id="x"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample2"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          学生信息模块
        </button>
        <div class="collapse" id="collapseExample2">
          <div class="card card-body">
            <a href="./studentInfo.html">查看学生信息</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample2">
          <div class="card card-body">
            <a href="./studentAddInfo.html">添加学生信息</a>
          </div>
        </div>
      </li>
      <li class="list-group-item">
        <button
          class="btn btn-primary"
          id="x"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample3"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          宿舍信息模块
        </button>
        <div class="collapse" id="collapseExample3">
          <div class="card card-body">
            <a href="./dorInfo.html">查看宿舍信息</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample3">
          <div class="card card-body">
            <a href="./dorAddInfo.html">添加宿舍信息</a>
          </div>
        </div>
      </li>
      <li class="list-group-item">
        <button
          class="btn btn-primary"
          id="x"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample4"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
        宿舍变动模块
        </button>
        <div class="collapse" id="collapseExample4">
          <div class="card card-body">
            <a href="./dorInfo.html">查看宿舍变动申请</a>
          </div>
        </div>
        
        </div></li>
      
    </ul>
    <form action="post" id="content">
      <div>
        <div>学生姓名：</div>
        <div><input type="text" value="张三" class="later" /></div>
        <div>性别：</div>
        <div>
          <select name="gender" id="" class="selected">
            <option value="男" selected>男</option>
            <option value="女">女</option>
          </select>
        </div>
        <div>年级：</div>
        <div>
          <select name="" id="" class="selected">
            <option value="19级" selected>19级</option>
            <option value="20级">20级</option>
            <option value="21级">21级</option>
          </select>
        </div>
        <div>所属专业：</div>
        <div>
          <select name="" id="" class="selected">
            <option value="软件工程" selected>软件工程</option>
            <option value="数字艺术">数字艺术</option>
            <option value="新媒体">新媒体</option>
          </select>
        </div>
      </div>
      <div>
        <div>班主任：</div>
        <div>
          <select name="" id="" class="selected">
            <option value="张老师" selected>张老师</option>
            <option value="李老师">李老师</option>
            <option value="王老师">王老师</option>
          </select>
        </div>
        <div>寝室号</div>
        <div><input type="text" value="30-3-3-2" class="later" /></div>
        <div>家庭地址</div>
        <div>
          <input type="text" value="四川省泸州市江阳区" class="later" />
        </div>
        <div>
          <input type="button" value="保存" id="down" /><span
            style="width: 20px"
          ></span
          ><input type="button" value="提交" name="" id="post" />
        </div>
      </div>
    </form>
    <div id="aboat">
      <a href="">电子科技大学@1956-2022</a>|<a href="">加入我们</a>|<a href=""
        >合作联系</a
      >|<a href="">联系客服</a>|<a href="">隐私政策</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      $('.btn-primary').click(function () {
        $('.btn-primary').hover(function () {
          $('.btn-primary').css({
            'background-color': 'white',
            color: 'rgb(83, 83, 83)',
          })
        })
      })
      $('#down').click(function () {
        $('.later').attr('readonly', 'readonly')
        $('#down').attr('disabled', 'true')
        $('.selected').attr('disabled', 'true')
      })
    </script>
  </body>
</html>
